<template>
  <div class="content">
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>通知管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统通知</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">系统通知</div>
      <div class="orderList">
        <ul style="list-style-type: none;">
          <li v-for="(item, index) in list" :key="index">
            <div class="entirety">
              <div class="left">
                <div class="fist">{{ item.msgNode }}</div>
                <div class="number">
                  <span>标题:</span>
                  <el-input
                    type="text"
                    placeholder="请输入"
                    v-model="item.msgTitle"
                    maxlength="15"
                    show-word-limit
                    class="demo"
                    size="mini"
                  ></el-input>
                  <el-checkbox
                    label="同时发送手机消息栏通知"
                    size="small"
                    :checked="item.sendType == 1 ? false : true"
                    @change="guoxuan($event)"
                  ></el-checkbox>
                </div>
                <div class="neirong">
                  <span class="one">内容：</span>
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入"
                    v-model="item.msgContent"
                  >
                  </el-input>
                </div>
              </div>
              <!-- 1:开启，0:禁用-->
              <div class="right">
                <el-button
                  :type="item.tempSwitch != 1 ? 'primary' : 'info'"
                  :disabled="item.tempSwitch == 1 ? true : false"
                  @click="open(item)"
                  >开启</el-button
                >
                <el-button
                  :type="item.tempSwitch == 1 ? 'primary' : 'info'"
                  :disabled="item.tempSwitch != 1 ? true : false"
                  @click="open(item)"
                  >停用</el-button
                >
                <el-button
                  style="background-color:#fd804c;color: #fff;"
                  @click="save(item)"
                  >保存</el-button
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <div class="pagination">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            :current-page.sync="pagination.currentPage"
            :page-size="pagination.pageSize"
            :total="pagination.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      list: [],
      usopen: 0,
      disable: "primary",
      // 分页数据
      pagination: {
        currentPage: 1, //当前页
        pageSize: 20, // 每页条数
        currentPage: 1, //当前页
        total: 0 // 数据总量
      }
    };
  },
  activated() {
    this.DetailByPage();
  },
  methods: {
    //同时发送手机消息栏通知
    guoxuan(a) {
      if (a == false) {
        this.num = 1;
      } else {
        this.num = 2;
      }
    },
    DetailByPage() {
      const params = {
        page: this.pagination.currentPage,
        size: this.pagination.pageSize
      };
      this.$http({
        url: "/messageadmin/message/fetchSystemMessageList",
        method: "get",
        params
      }).then(res => {
        //console.log(res.list);
        this.list = res.list;
        this.pagination.total = res.list.length;
      });
    },
    //保存
    save(data) {
      const params = {
        page: this.pagination.currentPage,
        size: this.pagination.pageSize,
        subMsgType: data.subMsgType,
        msgContent: data.msgContent,
        msgTitle: data.msgTitle,
        sendType: this.num || data.sendType
      };
      this.$http({
        url: "/messageadmin/message/fetchSystemMessageList",
        method: "get",
        params
      }).then(res => {
        //console.log(res);
      });
    },
    //开启关闭
    open(data) {
      this.$http({
        url: "/messageadmin/message/controlSystemMessageStatus",
        method: "POST",
        data: {
          subMsgType: data.subMsgType,
          tempSwitch: data.tempSwitch == 0 ? 1 : 0
        }
      }).then(res => {
        //console.log(res);
      });

      setTimeout(() => {
        this.DetailByPage();
      }, 300);
    },
    // 分页  当前页变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.paginationList = this.list.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.orderList {
  background-color: #ebeef1;
  padding-right: 32px;
  padding-top: 1px;
  padding-bottom: 1px;
  display: block;
  font-size: 16px;
  // border-radius: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  list-style-type: none;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.entirety {
  width: 100%;
  margin: 10px;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  padding-left: 10px;
  .fist {
    margin-top: 10px;
  }
  .left {
    height: 100%;
    margin-right: 20px;
    flex: 1;
    border-radius: 1px;
    border-right: 7px solid #f2f2f6;
    .number {
      margin-top: 10px;
      .demo {
        width: 270px;
        padding-left: 13px;
      }
      .el-checkbox {
        padding-left: 25px;
      }
    }
    .neirong {
      margin-bottom: 10px;
      margin-top: 10px;
      .one {
        line-height: 50px;
      }
      .el-textarea {
        width: 550px;
      }
    }
  }
  .right {
    height: 100%;
    padding-left: 20px;
    padding-left: 70px;
    margin-right: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .el-button {
      margin-top: 5px;
    }
    .el-button + .el-button {
      margin-left: 0;
    }
  }
}
.pagination {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
</style>
